<template>
    <div>
        <div v-for="(item, index) in receiveResult" :key="index">
            <div class="search-item-preview">
                <div class="title-preview">{{ item.name_zh }}：</div>
                <template v-if="item.type === 'int'">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'string'">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'pem'">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else-if="item.type === 'exe'">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === ''">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'bool'">
                    <a-input v-model:value="item.value" class="a-inp-preview" disabled />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else>
                    <div class="imgcontents">
                        <div class="imgself">
                            <img
                                v-if="item.fileData && item.type === 'png'"
                                :src="`data:image/${item.type};base64,${item.fileData}`"
                                alt="default"
                            />
                            <img
                                v-else-if="item.fileData && item.type !== 'png'"
                                :src="`data:image/${item.type}+xml;base64,${item.fileData}`"
                                alt="default"
                            />
                            <div v-else class="loadingdiv">
                                <loading-outlined v-if="loading"></loading-outlined>

                                <div class="antext">no img</div>
                            </div>
                        </div>
                        <div class="exp-anddesc">
                            <a-button type="link" class="desc" @click="setVisible(item)"
                                >查看示例</a-button
                            >

                            <div class="desc">{{ item.desc }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <a-image
            v-if="itemData.demoData"
            :width="100"
            :style="{ display: 'none' }"
            :preview="{
                visible,
                onVisibleChange: setVisible,
            }"
            :src="itemData.demoData ? `data:image/png;base64,${itemData.demoData}` : ''"
        >
        </a-image>
    </div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue';

import { LoadingOutlined } from '@ant-design/icons-vue';

const receiveResult = ref([]);

const props = defineProps({
    itemValue: {
        type: Array,
        required: true,
    },
    namesend3: {
        type: String,
        required: true,
    },
});

// 新建二次弹窗的图片上传部分;
const itemData = ref('');
const visible = ref(false);
const setVisible = (val) => {
    visible.value = true;
    itemData.value = val;
};

// 拿到json文件里的value路径

const finalname1 = ref('');

watch(
    () => props.namesend3,
    (newArray) => {
        finalname1.value = newArray;
    },
    { immediate: true },
);
watch(
    () => props.itemValue,
    (newArray) => {
        receiveResult.value = newArray;
    },
    { immediate: true },
);

// 上传示例图片

// 上传 pem 文件
</script>

<style lang="scss" scoped>
@import '@/styles/uploadpadding.scss';

.desc {
    width: 150px;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    height: 40px;
    margin-left: 20px;
}

.imgself {
    width: 100px;
    height: 100px;
    border: 1px dashed #cbd0db;
    border-radius: 5px;
    img {
        width: 100px;
        height: 100px;
    }
}
.loadingdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}
.antext {
    width: 50px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
</style>
